<template>
  <view class="tabbar ios">
    <view class="list">
      <view v-for="(item,b) in list" :key="b" class="view flex" @click="changeTab(item)">
        <view class="views flex">
          <view v-if="item.isR" class="radio">
            <image mode=""
                   src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file19b4516c5cc44e85a30065cd57ebc753.png">
            </image>
          </view>
          <image :class="item.isR ? 'o0' : ''" :src=" b === index ? item.selectIcon : item.icon" class="icon"
                 mode=""></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        title: '首页',
        path: '/pages/home/index',
        icon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarOneFalse.png',
        selectIcon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarOneTrue.png'
      },
        // {
        //   title: '去运动',
        //   path: '/pages/venue/index',
        //   icon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/basketballFalse.png',
        //   selectIcon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/basketballTrue.png'

        // },
        // {
        // 	title: '去旅游',
        // 	path: '/pages/tabbar/home',
        // 	icon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/home.png',
        // 	selectIcon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/select-home.png'

        // },
        // {
        //   title: '旅程计划',
        //   path: '/pages/tourplan/index',
        //   icon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarTwoFalse.png',
        //   selectIcon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarTwoTrue.png'
        // }, 
		{
          title: '个人中心',
          path: '/pages/my/index',
          icon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarThreeFalse.png',
          selectIcon: 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tabbarThreeTrue.png'
        }
      ]
    }
  },
  props: {
    index: 0
  },
  methods: {
    changeTab(item) {
      uni.reLaunch({
        url: item.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar {
  height: 116rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9999;
  // border-radius: 40rpx 40rpx 0 0;
  // background: url('https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/filed1abf9dd4647474aadd88b8c24576002.png') no-repeat white;
  background-color: #fff;
  background-size: 100% 83rpx;
  background-position: left bottom;

  .list {
    display: flex;

    .view {
      flex: 1;
      height: 116rpx;
      flex-direction: column;

      .views {
        position: relative;
        width: 100%;
        height: 116rpx;
        flex-direction: column;
      }

      .icon {
        width: 45rpx;
        height: 45rpx;
        margin-bottom: 11rpx;
      }

      text {
        font-size: 18rpx;
        font-weight: 500;
        color: rgba(194, 194, 204, 1);
      }

      .radio {
        width: 110rpx;
        height: 110rpx;
        position: absolute;
        top: -55rpx;
        left: 50%;
        border-radius: 50%;
        box-sizing: border-box;
        transform: translateX(-50%);

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
